<!DOCTYPE html>
<html>
<head>
    <title>欢迎使用后台管理系统</title>
    <meta charset="utf-8">
    <%- include ../default.html%>
    <link href="/public/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="/public/css/admin.css" rel="stylesheet" type="text/css"/>
    <link href="/public/plugins/wangEditor/wangEditor.min.css" rel="stylesheet" type="text/css"/>
    <link href="/public/plugins/highlight/css/default.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .el-row{
            margin-bottom: 10px;
        }
        #editor .w-e-text-container{
            height: 520px !important;
        }
        .el-tabs{
            min-height: 75px;
        }
        .el-tag+.el-tag{
            margin-left: 10px;
        }
        h1{
            font-size:2em !important;
        }
        .el-cascader-menus.el-popper{z-index: 99999 !important;}
    </style>
    <style type="text/css">
        .el-date-editor.el-input--prefix .el-input__inner{padding: 0 30px;}
    </style>
</head>

<body>
<%- include header.html%>
<section>
    <%- include menu.html%>
    <aside class="content" id="content">
        <div v-show="!dialogArticleVisible && !preView">
        <el-form :inline="true" ref="formModel" :model="formModel"  class="demo-form-inline api-user" v-cloak onsubmit="return false">
            <el-form-item label="标题关键字" prop="title">
                <el-input type="text" v-model="formModel.title" auto-complete="off" size="mini" ref='roleName' placeholder="标题关键字"></el-input>
            </el-form-item>
            <el-form-item label="发布日期" prop="date">
                <el-date-picker v-model="formModel.date"  type="date" placeholder="发布日期" size="mini" :clearable="false" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="submitForm" size="mini" icon="el-icon-search">查询</el-button>
                <el-button type="danger" @click="batchDelete" size="mini" icon="el-icon-circle-close-outline">批量删除</el-button>
            </el-form-item>
        </el-form>
        <template>
            <el-table :data="tableData" style="width: 100%" class="aa-table"  @select="selectRow" @select-all="selectAll" ref="list">
                    <el-table-column fixed type="selection" label="" width="50"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
                    <el-table-column fixed prop="title" label="标题" width="250"></el-table-column>
                    <el-table-column fixed prop="updatetime2" label="创建时间" width="160"></el-table-column>
                    <el-table-column fixed prop="tag" label="文章标签" :show-overflow-tooltip="true" :formatter="formatTags" align="center"></el-table-column>
                    <el-table-column fixed prop="readCount" label="浏览数" width="100" align="center"></el-table-column>
                    <el-table-column fixed prop="collectCount" label="收藏数" width="100" align="center"></el-table-column>
                    <el-table-column fixed prop="operate" label="操作"  width="300" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini"  @click="preViewItemHandler(scope.row)">预览</el-button>
                            <el-button size="mini" type="primary" @click="editItemHandler(scope.row)">编辑</el-button>
                            <el-button size="mini" type="warning" @click="publish2Secret(scope.row)">{{scope.row.publish==1?"私密":"公开"}}</el-button>
                            <el-button size="mini" type="danger" @click="deleteItemHandler(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
            </el-table>
            <div class="block repeat-menu-page">
                <el-pagination  background
                                :current-page="page.currentPage"
                                :page-sizes="page.pageSizes"
                                :page-size="page.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="page.total"
                                @size-change="sizeChangeHandler"
                                @current-change="currentChangeHandler"
                >
                </el-pagination>
            </div>
        </template>
        <!-- 确认提示框 -->
        <el-dialog title="提示信息" :visible.sync="confirmVisible" width="30%"  custom-class="api-dialog-tips" v-cloak>
            <span>{{confirmMessage}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancelHandler">取 消</el-button>
                <el-button type="primary" @click="confirmHandler" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        </div>
        <!-- 编辑文章 -->
        <div v-show="dialogArticleVisible">
            <el-form :inline="false" v-model="editModel" class="demo-form-inline api-user" style="padding-top:10px;" v-cloak>
                    <el-row :gutter="20">
                        <el-col :sm="8" :md="6" :lg="4">
                            <el-cascader placeholder="请选择文章分类" expand-trigger="hover" :options="options" v-model="editModel.classType" :props="props" @change="handleChange"></el-cascader>     
                        </el-col> 
                        <el-col :sm="16" :md="18" :lg="20">
                            <el-input  auto-complete="off" v-model="editModel.title" placeholder="请输入文章标题"></el-input>
                        </el-col>    
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :sm="24" :md="24" :lg="24">
                            <div id="editor"></div>
                        </el-col>   
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :sm="24" :md="24" :lg="24">
                            <template>
                                <el-tabs v-model="activeName" @tab-click="handleTabClick">
                                    <el-tab-pane v-for="(vo,index) in tagList" :label="vo.tagName" :name="vo.id" :key="index">
                                        <template>
                                            <el-checkbox v-for="(co,index1) in vo.children" v-model="co.checked" :key="index1" @change="changeCheckState(co)">{{co.tagName}}</el-checkbox>
                                        </template>
                                    </el-tab-pane>
                                </el-tabs>
                            </template>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :sm="24" :md="24" :lg="24">
                            <span class="el-tag">已选择的标签(最多5个):</span>
                            <el-tag v-for="(tag,index) in checkdTags" :key="tag.name" closable type="success"  @close="closeCheckdedTag(tag)">{{tag.tagName}}</el-tag>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :sm="24" :md="24" :lg="24" style="text-align:center;">
                            <el-button type="danger" plain @click="goback(0)">返回</el-button>
                            <el-button type="primary" plain @click="publishWen">保存</el-button>
                        </el-col>
                    </el-row>
            </el-form>
        </div>
        <!-- 预览文章 -->
        <div v-show="preView">
            <el-row :gutter="20">
                <el-col :sm="24" :md="24" :lg="24" style="text-align: right;padding-right: 46px;">
                    <!-- <el-button type="primary" icon="el-icon-back"  @click="preViewBack" size="mini" title="返回" style="float: right;">返回</el-button> -->
                    <a href="javascript:void(0)"  @click="preViewBack" style="color: dodgerblue;">文章列表</a>
                </el-col>
                <el-col :sm="24" :md="24" :lg="24">
                    <div id="pre"></div>
                </el-col>
            </el-row>
        </div>
    </aside>
</section>
<script src="/public/plugins/wangEditor/wangEditor.js"></script>
<script src="/public/plugins/highlight/highlight.pack.js"></script>
<script src="/public/js/main.js"> </script>
<script src="/public/js/articleManage.js"></script>
</body>
</html>
